<template>
  <div class="drawer-item">

    <div class="mgb10">
      <el-radio-group v-model="currentAccountType"  class="time-radio-group">
        <el-radio-button
          v-for="accountItem in currentPlatformList"
          :key="accountItem.accountType"
          :label="accountItem.accountType"
        >
          {{accountItem.platformName}}
          ({{accountItem.goodsSizeStickerPriceType === 1 ? $t('userInfo.default') :  $t('userInfo.custom')}})
        </el-radio-button>
      </el-radio-group>
    </div>



    <el-switch
      :value="currentObj.goodsSizeStickerPriceType"
      active-color="#ff4949"
      inactive-color="#1890ff"
      :active-text="$t('userInfo.custom')"
      :inactive-text="$t('userInfo.default')"
      :inactive-value="1"
      :active-value="2"
      @change="setGoodsSizePriceDefault"
    >
    </el-switch>

    <div class="mgt20">
      <goods-size-price :goods-size-sticker-price="currentObj.goodsSizeStickerPrice" @changeValue="changeGoodsSizePrice"></goods-size-price>
    </div>


    <div style="line-height: 20px;color: #000000" class="mgt10 mgb20">
      <div class="dialog-info">
        {{ $t('userInfo.userInfoText1') }}
      </div>
      <div style="font-size: 13px">
        · {{$t('userInfo.userInfoText2')}}
        <br>
        · {{$t('userInfo.userInfoText3')}}
        <br>
        · {{$t('userInfo.userInfoText4')}}
        <br>
        ·
        <span v-html="$t('userInfo.userInfoText5')"></span>

      </div>
    </div>
  </div>
</template>

<script>
import GoodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";
import {deepCopy} from "@/utils";
import GoodsSizePrice from "@/views/warehouse/components/GoodsSizePrice.vue";
import {platformList} from "@/utils/platform";


export default {
  name: 'GoodsSizeStickerPriceDrawerItem',
  components: {GoodsSizePrice},
  mixins: [GoodsSizePriceMixin],
  props: {
    userSetting: {
      type: Object,
    },
    userForm: {
      type: Object,
    },
    setting: {
      type: Object,
    }
  },
  computed: {
    currentPlatformList(){
      return this.platformList.filter(item=>{
        return !!this.setting.platformOneShippingPrice.find(_item => _item.accountType === item.accountType);
      }).map(item=>{
        const obj = this.userForm.platformOneShippingPrice.find(_item => _item.accountType === item.accountType)
        item.goodsSizeStickerPriceType = obj.goodsSizeStickerPriceType
        return item
      })
    },
    currentObj(){
      return this.userForm.platformOneShippingPrice.find(item=> item.accountType === this.currentAccountType)
    },
    currentSetting(){
      return this.setting.platformOneShippingPrice.find(_item => _item.accountType === this.currentAccountType);
    }
  },
  data(){
    return {
      currentAccountType: 'MercadoLibre',
      platformList, // 所有的平台
    }
  },
  methods: {
    changeGoodsSizePrice(){
      this.currentObj.goodsSizeStickerPriceType = 2;
    },
    setGoodsSizePriceDefault(){
      if(this.currentObj.goodsSizeStickerPriceType === 1){
        this.currentObj.goodsSizeStickerPriceType = 2;
      }else{
        this.currentObj.goodsSizeStickerPriceType = 1;
        this.currentObj.goodsSizeStickerPrice = deepCopy(this.currentSetting.goodsSizeStickerPrice);
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "../scss/drawer-item";
</style>
